<template>
    <div>
        <el-card>
            <div class="flex flex-jc-sb border-bottom pd-b-10">
                <div class="bold">渠道组</div>
                <div>
                    <el-icon class="pointer" @click="showChannelGroup">
                        <CirclePlus />
                    </el-icon>
                </div>
            </div>
            <div class="mg-t-10">
                <div v-for="(i, index) in channelList" :key="index" class="flex flex-jc-sb items-center flex-item pointer" :class="{'active': channelId === i.id}">
                    <div class="left" @click="handleItemClick(i)">
                        <span v-if="i.disabled">{{ i.name }}</span>
                        <el-input v-else :ref="(el) => setDom(el, index)" v-model="i.name" size="small"
                            @blur="handleBlur(i)"></el-input>
                    </div>
                    <div>
                        <el-dropdown @command="handleDropDownClick($event, i, index)" trigger="click" @click.stop>
                            <span class="el-dropdown-link">
                                <el-icon>
                                    <More />
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="rename">重命名</el-dropdown-item>
                                    <el-dropdown-item command="addAccount">新增收款账户</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
    <channelGroup v-model:show="show" @success="handleAddChannelSuccess"/>
    <receiptAccount v-model:show="showAccount" :channel-id="curChannelId" @success="handleAddAccountSuccess"/>
</template>
<script setup lang="ts">
import { ref, watch, onMounted, onActivated} from 'vue'
import { ElMessage } from 'element-plus'
import { getChannelList, updateChannelName } from 'api/tools/manageAccount.ts'

import channelGroup from '../dialog/channelGroup.vue'
import receiptAccount from '../dialog/receiptAccount.vue'

const show = ref(false)
const showAccount = ref(false)
const channelId = ref('')
// 新增账户用
const curChannelId = ref('')
let cachedValue = ''

const emits = defineEmits(['channelId', 'refresh'])

// 获取页面input的dom，自动获焦用
const domRef = ref(new Map())
const setDom = (el, key) => {
    if (el) {
        domRef.value.set(key, el)
    }
}

const channelList = ref([])
const getList = () => {
    getChannelList({
        type: 1
    }).then(res => {
        channelList.value = res?.list || []
        channelList.value.forEach(i => {
            i.disabled = true
        })
        if (channelList.value.length && !channelId.value) {
            channelId.value = channelList.value[0].id
        }
    })
}

const showChannelGroup = () => {
    show.value = true
}
const handleDropDownClick = (ev, item, index) => {
    if (ev === 'rename') {
        item.disabled = false
        cachedValue = item.name
        setTimeout(() => {
            domRef.value.get(index).focus()
        }, 100)
    }

    if (ev === 'addAccount') {
        curChannelId.value = item.id
        showAccount.value = true
    }
}
const handleBlur = (item) => {
    item.disabled = true
    const data = {
        name: item.name,
        id: item.id
    }
    console.log(1234, cachedValue, item.name)
    if (cachedValue === item.name) return
    updateChannelName(data).then(res => {
        ElMessage({
            message: '修改成功',
            type: 'success',
        })
        getList()
    })
}

const handleItemClick = (item) => {
    channelId.value = item.id
}

const handleAddChannelSuccess = () => {
    getList()
}

const handleAddAccountSuccess = () => {
    if (channelId.value === curChannelId.value) {
        emits('refresh')
    }
}

watch(channelId, (newval) => {
    emits('channelId', newval)
})

onMounted(() => {
    getList()
})

onActivated(() => {
    getList()
})
</script>
<style lang="scss" scoped>
.flex-item {
    padding: 0 10px;
    border-radius: 6px;
    &.active {
        background: #ebeffe;
        color: #3e5ff5;
    }
}
.left {
    flex: 1;
    height: 50px;
    line-height: 50px;
}
</style>